<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="50vw"
    :close-on-click-modal="false"
    :before-close="closeFormModal"
  >
    <el-form ref="refForm" label-width="150px" :inline="false" :model="subForm" :rules="formRules" class="pr-50px">
      <el-form-item label="轮播图url" prop="url" label-position="left">
        <!-- <el-select v-model="typeList.id" placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select> -->
        <el-autocomplete
          v-model="subForm.url"
          :fetch-suggestions="querySearch"
          popper-class="my-autocomplete"
          placeholder="Please input"
          @select="handleSelect"
          :clearable="true"
        >
          <template #suffix>
            <el-icon class="el-input__icon" @click="handleIconClick">
              <edit />
            </el-icon>
          </template>
          <template #default="{ item }">
            <div class="value">{{ item.name }}</div>
            <!-- <span class="link">{{ item. }}</span> -->
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="轮播图片" prop="imageId" label-position="left">
        <el-upload
          class="upload-demo"
          action="http://159.75.7.74:5656/Files/FileUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="onChang"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeFormModal">取 消</el-button>
        <el-button type="primary" @click="confirmBtnClick">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/*1.初始化引入和实例化*/
const emit = defineEmits(['selectPageReq', 'hideComp'])
/*2.modal新增和修改*/
//新增
let subForm = reactive({
  id: '',
  url: '',
  imageId: ''
})
onMounted(() => {
  loadAll()
})

//图片
const fileList = reactive({})
const refForm = ref(null)
let confirmBtnClick = () => {
  refForm.value.validate((valid) => {
    if (valid) {
      if (subForm.id) {
        updateReq()
      } else {
        insertReq()
      }
    } else {
      return false
    }
  })
}
const { formRules, elMessage } = useElement()

const state = ref('')
const links = ref([])

const querySearch = (queryString, cb) => {
  const results = queryString ? links.value.filter((x) => x.name.indexOf(queryString) != -1) : links.value
  cb(results)
}

const loadAll = () => {
  let reqConfig = {
    url: '/CommodityBusiness/Commodity/GetBySelect',
    method: 'get',
    isParams: true
  }
  axiosReq(reqConfig).then((resData) => {
    links.value = resData?.datas
    console.log(links.value)
  })
}

const handleSelect = (item) => {
  subForm.url = '/pages/home/commodityDetail?id=' + item.id
}

const handleIconClick = (ev) => {
  console.log(ev)
}

const insertReq = () => {
  const data = JSON.parse(JSON.stringify(subForm))
  delete data.id
  axiosReq({
    url: '/SystemtManagementBusiness/HomePageCarousel/Add',
    data: data,
    method: 'post', //--c
    bfLoading: true
  }).then(() => {
    elMessage('保存成功')
    emit('selectPageReq')
    emit('hideComp')
  })
}
//修改
const reshowData = (row) => {
  Object.keys(row).forEach((fItem) => {
    Object.keys(subForm).forEach((sItem) => {
      if (fItem === sItem) {
        subForm[sItem] = row[sItem]
      }
    })
  })
}
let updateReq = () => {
  return axiosReq({
    url: '/CommodityBusiness/Commodity/Update',
    data: subForm,
    method: 'put',
    bfLoading: true
  }).then(() => {
    elMessage('更新成功')
    emit('selectPageReq')
    emit('hideComp')
  })
}

/*3.弹框相关*/
//显示弹框
const { dialogTitle, dialogVisible, chooseFileName } = useCommon()
let showModal = (isEdit, detailData) => {
  if (isEdit) {
    dialogTitle.value = `编辑【${detailData.url}】`
    dialogVisible.value = true
    reshowData(detailData)
  } else {
    dialogTitle.value = '添加【轮播图】'
    dialogVisible.value = true
  }
}
//关闭弹框
let closeFormModal = () => {
  emit('hideComp')
}

/*4.上传文件相关*/
const refSettingFile = ref(null)
const goUploadFile = () => {
  refSettingFile.value.click()
}

const onChang = (response, file, fileList) => {
  subForm.imageId = ''
  subForm.imageId = response
}

//导出给refs使用
defineExpose({
  showModal
})

//导出属性到页面中使用
// let {levelList} = toRefs(state);
</script>

<style scoped lang="scss"></style>
